<template>
  <div>
    <el-form class="form" :model="current_item" label-width="100px">
      <el-form-item :label="t('收货人') + '：'">
        <el-input v-model="current_item.name" type="text"></el-input>
      </el-form-item>
      <el-form-item :label="t('手机号码') + '：'">
        <el-input v-model="current_phone" type="number"></el-input>
      </el-form-item>
      <el-form-item :label="t('所在地区') + '：'">
        <div class="select-area">
          <el-select
            v-model="current_area[0]"
            :placeholder="t('请选择')"
            value-key="name"
            filterable
            @change="selectHandle($event, 0)"
            style="
              width: 108px;
              height: 50px;
              background: #f9f9f9;
              border-radius: 10px;
            "
          >
            <el-option
              v-for="item in options[0]"
              :key="item.aid"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="current_area[1]"
            :placeholder="t('请选择')"
            value-key="name"
            filterable
            @change="selectHandle($event, 1)"
            style="
              width: 108px;
              height: 50px;
              background: #f9f9f9;
              border-radius: 10px;
            "
          >
            <el-option
              v-for="item in options[1]"
              :key="item.aid"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="current_area[2]"
            :placeholder="t('请选择')"
            value-key="name"
            filterable
            @change="selectHandle($event, 2)"
            style="
              width: 108px;
              height: 50px;
              background: #f9f9f9;
              border-radius: 10px;
            "
          >
            <el-option
              v-for="item in options[2]"
              :key="item.aid"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="current_area[3]"
            :placeholder="t('请选择')"
            value-key="name"
            filterable
            @change="selectHandle($event, 3)"
            style="
              width: 108px;
              height: 50px;
              background: #f9f9f9;
              border-radius: 10px;
            "
          >
            <el-option
              v-for="item in options[3]"
              :key="item.aid"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item :label="t('详细地址')">
        <textarea
          v-model="current_item.address"
          style="
            box-sizing: border-box;
            width: 450px;
            height: 99px;
            background: #f9f9f9;
            border-radius: 10px;
            padding: 17px 20px;
            font-weight: 400;
            font-size: 16px;
            color: #333333;
            resize: none;
            outline: none;
            border: none;
          "
        ></textarea>
      </el-form-item>
      <div class="btns">
        <el-button class="btn add" @click="onSubmit('add')">{{
          t("确认新增地址")
        }}</el-button>
        <el-button class="btn back" @click="onSubmit('back')">{{
          t("返回购物车")
        }}</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { getCountryList, getCityList } from "@/utils/api.js";
export default {
  props: {
    adress: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    adress: {
      deep: true,
      immediate: true,
      handler(n, o) {
        if (n && !o) {
          console.log(n);
          this.current_item = { ...n };
          this.current_area = [n.country, n.province, n.city, n.district];
          this.current_phone = n.mobile;
        }
      },
    },
  },
  data() {
    return {
      current_item: {
        name: "",
      },
      current_area: [],
      current_phone: "",
      options: [],
    };
  },
  async mounted() {
    let idx = 0;
    while (idx < 5) {
      if (idx == 0) {
        let res = await this.getAddress(idx);
        if (res.length == 0) break;
        let item = res.find((e) => e.name == this.current_area[idx]);
        this.current_area[idx] = item;
        this.options.push(res);
      } else {
        let index = idx - 1;
        let item = this.current_area[index];
        if (!item) break;
        let res = await this.getAddress(idx, item.id);
        if (res.length == 0) break;
        this.current_area[idx] = res.find(
          (e) => e.name == this.current_area[idx]
        );
        this.options.push(res);
      }
      idx++;
    }
  },
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     * @param {Object} opt 其他参数
     */
    t(v, opt) {
      if (opt) {
        return this.$t(`地址页.${v}`, opt);
      }
      return this.$t(`地址页.${v}`);
    },
    /**
     * 查询国家名,城市名等
     * @param {Number} idx 索引 0:country 1:provnice 2:city 3:district
     * @returns {Array}
     */
    async getAddress(idx, id) {
      if (idx == 0) {
        let res = await getCountryList();
        if (res.code == 1) return res.data;
        return [];
      } else {
        let res = await getCityList({ id: id });
        if (res.code == 1) return res.data;
        return [];
      }
    },
    onSubmit(key) {
      if (key == "add") {
        this.current_item.country = this.current_area[0]
          ? this.current_area[0].name
          : "";
        this.current_item.province = this.current_area[1]
          ? this.current_area[1].name
          : "";
        this.current_item.city = this.current_area[2]
          ? this.current_area[2].name
          : "";
        this.current_item.district = this.current_area[3]
          ? this.current_area[3].name
          : "";

        this.$emit("editAddress", this.current_item);
      } else if (key == "back") {
      }
    },
    /**
     * 城市选择器
     */
    async selectHandle(event, idx) {
      let lastItem = this.current_area[idx];
      let res = await this.getAddress(idx + 1, lastItem.id);
      this.options.splice(idx + 1, this.options.length);
      this.current_area.splice(idx + 1, this.current_area.length);
      this.current_area[idx] == lastItem.name;
      this.options[idx + 1] = res;
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep .el-form-item__content {
  width: 450px;
}
.form {
  background: #fff;

  .select-area {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    flex-direction: row;
  }

  .btns {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;

    .btn {
      width: 270px;
      height: 55px;
      background: #ff5757;
      border-radius: 10px;
      font-weight: 400;
      font-size: 16px;
      color: #f9f9f9;
    }

    .add {
      background: #ff5757;
      color: #fff;
      flex: 1;
    }

    .back {
      background: #e3e3e3;
      color: #333;
      flex: 1;
    }
  }
}

/deep/ input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>
<style>
.el-dialog__close {
  font-size: 30px !important;
}
</style>
